<template>
  <div style="position: absolute;top: 0px; bottom: 0px; width: 100%; background: white;">
    <van-row>
      <van-col span="24">
        <van-nav-bar fixed :border="false" style="background: none;"
                     @click-left="onClickLeft"
                     placeholder
                     safe-area-inset-top >
          <template #left>
            <van-icon color="black" style="font-weight:bolder;" name="arrow-left" size="20" />
            <span>返回</span>
          </template>
        </van-nav-bar>
      </van-col>
      <van-col span="24" style="margin-top: 6rem;">
        <van-cell-group :border="false" style="background: none;">
          <van-cell  :border="false" style="background: none;margin-left: 10px;">
            <template #title>
              <span style="font-size: 1.5rem; letter-spacing:.1em;  font-weight: bolder;">请输入验证码</span>
            </template>
            <template #label>
              <span style="font-size: .9rem; letter-spacing:.1em; padding-top: 1rem; display: block; ">
                验证码已发送至 ：{{phone}}
              </span>
            </template>
          </van-cell>
          <!-- 密码输入框 -->
          <van-cell :border="false">
            <van-password-input
                style="border: 1px solid #ccc;"
                :value="code"
                :mask="false"
                :focused="showKeyboard"
                @focus="showKeyboard = true"
            />
            <!-- 数字键盘 -->
            <van-number-keyboard
                theme="custom"
                close-button-text="完成"
                :safe-area-inset-bottom="false"
                v-model="code"
                @close="Verify"
                :show="showKeyboard"
                @blur="showKeyboard = false"
            />
          </van-cell>
          <van-cell style="margin-left: 10px;" :border="false">
            <span style="display: flex; align-items: center; justify-content: right;">
              <van-count-down millisecond  style="color: #f52443;font-size: 1.2em;" :time="time" format="ss" />
              <span style="">秒后可重新获取验证码</span>
            </span>
          </van-cell>

        </van-cell-group>
      </van-col>
    </van-row>
  </div>
</template>

<script>
export default {
  name: "authCode",
  data(){
    return{
      code:'',
      phone:'13110787392',
      time:  60 * 1000,
      showKeyboard:true,
    }
  },
  methods:{
    onClickLeft(){
        this.$router.replace("/regiest");
    },
    Verify(){
      this.$toast.loading({
        message: '发送验证码中...',
        forbidClick: true,
        onClose:()=>{
          if (this.code.length == 6 && this.code =='123456'){
            this.$toast.success("验证成功")
            this.$router.replace("/setPassword")
          }else{
            console.log(this.code)
            this.$toast.fail("验证码有误")
          }
        }
      });
    }
  }
}
</script>

<style scoped>

</style>
